<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/static/plugin/easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/plugin/easyUI/themes/icon.css">
    <script type="text/javascript" src="/static/plugin/easyUI/jquery.min.js"></script>
    <script type="text/javascript" src="/static/plugin/easyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/plugin/easyUI/locale/easyui-lang-zh_CN.js"></script>
    <script>
        var empId = null;
        $(function () {
            $("#employee_datagrid").datagrid({
                url:"/employee/query.do",
                fit:true,
                fitColumns:true,
                sortName:"hiredate",
                sortOrder:"desc",
                columns:[[
                    {field:"id",title:"员工id",width:100},
                    {field:"username",title:"员工姓名",width:100},
                    {field:"realname",title:"真实姓名",width:100},
                    {field:"tel",title:"电话",width:100},
                    {field:"email",title:"邮箱",width:100},
                    {field:"department",title:"所在部门",width:100,formatter:function (value,row,index) {
                            return row.department.name ? row.department.name : ""
                        }},
                    {field:"hiredate",title:"入职日期",width:100,sortable:true,order:"desc"},
                    {field:"state",title:"员工状态",width:100,formatter:function (value,row,index) {
                            return value ? "在职" : "<span style='color :red'>离职</span>"
                        }},
                    {field:"admin",title:"是否管理员",width:100,formatter:function (value,row,index) {
                            return value ? "是" : "否"
                        }},
                ]],
                pagination:true,
                singleSelect:true,
                toolbar:"#employee_datagrid_tb",
                onClickRow:function (index,row) {
                    if (row.state) {
                        $("#btn_changestate").linkbutton({
                            "text":"离职",
                            iconCls:"icon-no"
                        })
                    }else {
                        $("#btn_changestate").linkbutton({
                            "text":"复职",
                            iconCls:"icon-ok"
                        })
                    }
                }
            })
            $("#employee-dialog").dialog({
                width:300,
                height:450,
                closed:true,
                onClose:function () {
                    //清空表单数据
                    $("#employee-form").form("clear");
                }
            })

        });
        //修改员工状态
        function changestate() {
            //1.判断是否选中了需要操作的记录
            var currentRows =  $("#employee_datagrid").datagrid("getSelected");
            if(!currentRows){
                $.messager.alert("温馨提示","亲，请选择需要操作的员工","info");
                return;
            }
            //2.往后台发送ajax请求
            $.post("/employee/changeState.do",{empId:currentRows.id},function (data) {
                if (data.success) {
                    $.messager.alert("温馨提示","操作成功","info",function () {
                        $("#employee_datagrid").datagrid("reload");
                    })
                }else {
                    $.messager.alert("温馨提示",data.msg,"error");
                }
            })
        }
        //高级查询
        function searchForm() {
            //1.拿到表单中的查询条件
            var keyword = $("input[name='keyword']").val();
            //调用datagrid的load方法
            $("#employee_datagrid").datagrid("load",{
                keyword:keyword
            })
        }
        
        function add() {
            $("#employee-dialog").dialog("setTitle","员工新增");
            $("#employee-dialog").dialog("open");
            /*清空表单数据*/
            /*显示密码编辑*/
            $("#passwordDiv").css("display","block");
        }

        function save() {
            $("#employee-form").form("submit",{
                url:"/employee/saveOrUpdate.do",
                onSubmit:function (param) {
                    var roleArr = $("#rolebox").combobox("getValues");
                    for(var i=0;i<roleArr;i++){
                        param["roles['+i+'].id"] = roleArr[i];
                    }
                },
                success:function (data) {
                    data = $.parseJSON(data);
                    if (data.success) {
                        $.messager.alert("温馨提示","保存成功","info",function () {
                            $("#employee-dialog").dialog("close");
                            $("#employee_datagrid").datagrid("reload");
                        })
                    }else {
                        $.messager.alert("温馨提示","保存失败","error");
                    }
                }
            })
        }

        function edit() {
            var currentRow = $("#employee_datagrid").datagrid("getSelected");
            if (!currentRow) {
                $.messager.alert("温馨提示","亲，请选择一条需要操作的数据","info");
                return;
            }
            $("#employee-dialog").dialog("setTitle","员工编辑");
            $("#employee-dialog").dialog("open");
            /*数据回显*/
            currentRow["dept.id"] = currentRow.department.id;
            $("#employee-form").form("load",currentRow);
            /*隐藏密码框*/
            $("#passwordDiv").css("display","none");
            /*编辑的时候传入一个empId*/
            empId = currentRow.id;
            //设置该用户的角色信息,需要的是角色的id数组
            $.post("/employee/selectRoleByEmpId.do",{empId:empId},function (data) {
                $("#rolebox").combobox("setValues",data);
            })
        }

        function cancel() {
            $("#employee-dialog").dialog("close");
        }

        function reload() {
            $("#employee_datagrid").datagrid("reload");
        }
    </script>
</head>
<body>
    <%--员工列表界面--%>
    <table id="employee_datagrid"></table>
    <%--员工列表界面顶部的工具栏--%>
    <div id="employee_datagrid_tb">
        <a class="easyui-linkbutton" onClick="add()" data-options="iconCls:'icon-add',plain:true">新增</a>
        <a class="easyui-linkbutton" onclick="edit()" data-options="iconCls:'icon-edit',plain:true">编辑</a>
        <a id="btn_changestate" onclick="changestate()" class="easyui-linkbutton" data-options="iconCls:'icon-no',plain:true">离职</a>
        <a class="easyui-linkbutton" onclick="reload()" data-options="iconCls:'icon-reload',plain:true">刷新</a>
        <%--<br/>--%>
        <input class="easytui-textbox" name="keyword" style="width: 120px"/>
        <a class="easyui-linkbutton" onclick="searchForm()" data-options="iconCls:'icon-search',plain:true">查询</a>

    </div>
    <div id="employee-dialog">
        <form id="employee-form" method="post">
            <input type="hidden" name="id" id="emp_id">
            <div style="margin-bottom: 20px;">
                <input id="username_box" class="easyui-textbox" name="username"
                       validType="remote['/employee/getByUsername.do?empId='+emp_id.value,'username']",
                       style="width: 100%" data-options="
                invalidMessage:'用户名已存在',
                label:'账户名',labelWidth:60">
            </div>
            <div style="margin-bottom: 20px;">
                <input class="easyui-textbox" name="realname" style="width: 100%" data-options="label:'真实姓名',labelWidth:60">
            </div>
            <div id="passwordDiv" style="margin-bottom: 20px;">
                <input class="easyui-passwordbox" name="password" style="width: 100%" data-options="label:'密码',labelWidth:60">
            </div>
            <div style="margin-bottom: 20px;">
                <input class="easyui-textbox" name="tel" style="width: 100%" data-options="label:'电话',labelWidth:60">
            </div>
            <div style="margin-bottom: 20px;">
                <input class="easyui-textbox" name="email" style="width: 100%" data-options="label:'邮箱',labelWidth:60">
            </div>
            <div style="margin-bottom: 20px;">
                <input class="easyui-combobox" name="department.id" style="width: 100%"
                       data-options="label:'所在部门',labelWidth:60,
                       url:'/department/listAll.do',
                       valueField:'id',
                       textField:'name',
                       panelHeight:'auto'
                ">
            </div>
            <div style="margin-bottom: 20px;">
                <input class="easyui-datebox" name="hiredate" style="width: 100%" data-options="label:'入职时间',labelWidth:60">
            </div>
            <div style="margin-bottom: 20px;">
                <%--<input class="easyui-textbox" name="admin" style="width: 100%" data-options="label:'是否管理员:',labelWidth:75">--%>
                <label for="admin" class="textbox-label">是否管理员:</label>
                <input type="checkbox" name="admin" id="admin" value="true">
            </div>
            <div style="margin-bottom: 20px;">
                <input class="easyui-combobox" id="rolebox" name="" style="width: 100%"
                       data-options="label:'角色',labelWidth:60,
                       multiple:true,
                       url:'/role/listAll.do',
                       valueField:'id',
                       textField:'name',
                       panelHeight:'auto'
                ">
            </div>
            <a class="easyui-linkbutton" onClick="save()" data-options="iconCls:'icon-save',plain:true">保存</a>
            <a class="easyui-linkbutton" onclick="cancel()" data-options="iconCls:'icon-cancel',plain:true">取消</a>
        </form>
    </div>
</body>
</html>